<template>
  <div :ref="id" @click="init" />
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'BuildingBar',
  props: {
    data: { type: Object, default: () => [] },
    id: { type: String, default: '' }
  },
  data() {
    return {
      chartData: [],
      colorList: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 在指定容器中初始化echarts实例
      const container = this.$refs[this.id]
      const myCharts = echarts.init(container)
      // 指定图标配置项和数据
      const options = {
        grid: {
          top: 20,
          left: '4%',
          right: '1%',
          bottom: 10,
          containLabel: true // 是否显示刻度标签
        },
        xAxis: [
          {
            axisLine: { onZero: false },
            type: 'category',
            data: ['']
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            axisLine: { show: true },
            axisTick: { show: true },
            max: this.data.topFloor,
            min: this.data.bottomFloor > 0 ? 0 : this.data.bottomFloor,
            splitNumber: this.data.topFloor < 10 ? this.data.topFloor : '',
            minInterval: 1,
            boundaryGap: [2, 2],
            splitLine: {
              // gird 区域中的分割线
              show: false, // 是否显示
              lineStyle: {
                color: '#666',
                width: 1
              }
            }
          }
        ],
        series: this.createSeries(this.data.inspectFloors, this.data.saleFloor)
      }
      // 开始渲染图表
      myCharts.setOption(options)
    },
    createSeries(data = [], line = 0) {
      const series = []
      if (data.length > 0) {
        data.forEach((item, index) => {
          series.push({
            name: index,
            type: 'bar',
            // barWidth: '20',
            stack: 'stack',
            data: [item.floor],
            // 标记线
            markLine: {
              symbol: 'none',
              data: [
                {
                  silent: false,
                  lineStyle: { type: 'solid', color: 'red' },
                  label: { show: false },
                  yAxis: line
                }
              ]
            },
            itemStyle: {
              borderColor: item.inspectStatus ? '#1826b1' : '#fff',
              color: item.inspectStatus ? '#1826b1' : '#fff'
            }
          })
        })
      } else {
        series.push({
          type: 'bar',
          data: [],
          // 标记线
          markLine: {
            symbol: 'none',
            data: [
              {
                silent: false,
                lineStyle: { type: 'solid', color: 'red' },
                label: { show: false },
                yAxis: line
              }
            ]
          }
        })
      }
      return series
    }
  }
}
</script>
